<template>
	<view>
		<navbar :isback="false" title="驼乡生活信息超市"></navbar>
		<view class="head">
			<view class="u-flex u-flex-center">
				<view class="head__tx">
					<u-avatar :src="URL(userinfo.avatar)" shape="circle" size="130rpx"></u-avatar>
				</view>
				<view class="head__center" v-if="token">
					<view class="head__nickname">
						{{userinfo.username}}
					</view>

					<view class="head__id">
						ID:{{userinfo.id}}
					</view>
				</view>
				<view class="head__center" v-else @click="to('/pages/my/login')">
					<view class="head__nickname">
						请点击登录
					</view>
				</view>
			</view>
			<!-- <u-button text="编辑" v-if='token' @click="to('/pages/my/infomation')" icon="/static/my/edit.png" shape='circle'
				color="#ffffff" :customStyle="{height:'61rpx',width:'fit-content',color:'#4d92ff',margin:0}"></u-button> -->
		</view>
		<view class="con">
			<view class="con__tabbox">
				<view class="con__tabbox__item" v-for="(item,index) in tablist" :key="index"
					@click="to('/pages/msg/fblist?title='+item.text+'&type='+item.type+'&short_type='+item.short_type)">
					<view class="" style="position: absolute;top: -10rpx;right: -10rpx;z-index: 2;">
						<u-badge type="error" max="99" :value="item.value"></u-badge>
					</view>
					<u-icon :name="'/static/my/'+item.icon+'.png'" size="97rpx"></u-icon>
					<view class="con__tabbox__item__text">
						{{item.text}}
					</view>
				</view>
			</view>
			<!-- v-if="userinfo.group_id==1" -->
			<view class="u-flex u-flex-y-center u-flex-between" v-if="userinfo.group_id==1">
				<view class="shbox" v-for="(item,index) in shlist" :key="index"
					@click="to('/pages/my/auditing?title='+item.name+'发布&status='+item.status)">
					<view class="" style="position: absolute;top: 10rpx;right: 10rpx;">
						<u-badge type="error" max="99" :value="value" :show="index==0"></u-badge>
					</view>
					<u-icon :name="'/static/my/'+item.icon+'.png'" size="78rpx"></u-icon>
					<view class="" style="margin-left: 14rpx;">
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="con__box" v-for="(item,index) in list" :key="index">
				<view class="con__box__item" v-for="(item1,index1) in item" :key="index1" @click="clickh(item1)">
					<u-icon :name="'/static/my/'+item1.icon+'.png'" size="49rpx"></u-icon>
					<view class="u-flex u-flex-y-center u-flex-between con__box__item__center"
						:class='(index1+1)==item.length?"bb0":""'>
						<view class="con__box__item__text">
							{{item1.text}}
						</view>
						<u-icon name="/static/my/right.png" size="37rpx"></u-icon>
					</view>
				</view>

			</view>
		</view>
		<u-popup :show='showqr' mode="center" @close="showqr=false" round="30rpx" @open='open' bgColor='transparent'>
			<!-- <ayQrcode ref="qrcode" :modal="modal_qr" :url="qrcode" :height="175" :width="175" /> -->
			<view class="" style="padding: 50rpx;background-color: #fff;border-radius: 30rpx;">
				<uv-qrcode ref="qrcode" size="400rpx" :value="qrcode"></uv-qrcode>
			</view>
		</u-popup>
		<view class="kf">
			<button class="u-reset-button" open-type="contact">
				<image src="/static/xishi/kf.png" class="kficon" mode=""></image>
			</button>
		</view>
	</view>
</template>

<script>
	import home from '@/api/_home.js'
	import user from '@/api/_user.js'
	export default {
		data() {
			return {

				tablist: [{
						icon: 'zd',
						text: '置顶发布',
						type: 2,
						short_type: '',
						name: 'topCount',
						value: 0
					},
					{
						icon: 'pt',
						text: '普通发布',
						short_type: 1,
						type: 1,
						name: 'sendCount',
						value: 0
					},
					{
						icon: 'yh',
						text: '优惠发布',
						short_type: 2,
						type: 1,
						name: 'youhuiCount',
						value: 0
					},
					{
						icon: 'qt',
						text: '其他发布',
						type: 3,
						short_type: '',
						name: 'otherCount',
						value: 0
					},
				],
				list: [
					[{
							icon: 'jf',
							text: '缴费记录',
							url: '/pages/my/jflist'
						},
						{
							icon: 'sc',
							text: '我的收藏',
							url: '/pages/my/collectionlist'
						},
						{
							icon: 'qianbao',
							text: '我的钱包',
							url: '/pages/my/wallet'
						},
					],
					[{
							icon: 'qr',
							text: '二维码',
							url: ''
						}, {
							icon: 'fb',
							text: '我的发布',
							url: '/pages/my/pagehome?title=我的发布'
						},

						{
							icon: 'sz',
							text: '我的设置',
							url: '/pages/my/set'
						},
					]
				],
				shlist: [{
						name: '待审核',
						icon: 'dsh',
						status: 1
					},
					{
						name: '已审核',
						icon: 'ysh',
						status: 2
					},
				],
				userinfo: {},
				token: '',
				value: 0,
				showqr: false,
				qrcode: '',
				modal_qr: false,
			};
		},
		onLoad() {
			this.userinfo = this.$store.state.userinfo
			if (this.userinfo.group_id == 1) {
				this.list[0].unshift({
					icon: 'jf',
					text: '订单信息',
					url: '/pages/xishi/order'
				}, )
			}
		},
		methods: {
			clickh(item) {
				if (item.url) {
					this.to(item.url)
				} else {
					this.showqr = true
				}

			},
			
			open() {
				let that = this;
				home.readConfig({
					configName: 'sharelink'
				}).then(res => {
					if (res.data.code == 1) {
						this.qrcode = res.data.data.sharelink
						
					}
				})
			}
		},
		onShow() {
			this.userinfo = this.$store.state.userinfo
			this.token = uni.getStorageSync('xxcstoken')
			user.myRate().then(res => {
				if (res.data.code == 1) {
					if (res.data.data.status == 1) {
						uni.navigateTo({
							url: '/pages/msg/proportion'
						})
					}
				} else {
					uni.hideToast()
				}
			})
			user.ourNotifyCount().then(res => {
				if (res.data.code == 1) {
					let value = 0
					for (let key in res.data.data) {
						this.tablist.map(t => {
							if (t.name == key) {
								t.value = res.data.data[key]
								value += t.value
							}
						})

					}
					if (this.userinfo && this.userinfo.group_id == 1) {
						home.infoCount().then(res1 => {
							if (res.data.code == 1) {
								this.value = res1.data.data.count
								uni.setTabBarBadge({
									index: 3,
									text: '' + (Number(value) + Number(this.value))
								})
							}
						})
					} else {
						uni.setTabBarBadge({
							index: 3,
							text: '' + value
						})
					}
				}
			})



		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F1F4FB;
	}

	.head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 60rpx 30rpx 140rpx;
		background-color: #0384fc;

		&__tx {
			border: 4rpx solid #a4d3fe;
			border-radius: 50%;
		}

		&__center {
			height: 84rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding: 16rpx 0 36rpx 14rpx;
		}

		&__nickname {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 39rpx;
			color: #FFFFFF;
			line-height: 39rpx;
		}

		&__id {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 29rpx;
			color: #FFFFFF;
			opacity: 0.6;
			line-height: 29rpx;
		}
	}

	.con {
		padding: 0 30rpx;

		&__tabbox {
			height: 233rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
			margin-top: -100rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin-bottom: 25rpx;

			&__item {
				display: flex;
				flex-direction: column;
				align-items: center;
				position: relative;

				&__icon {
					width: 97rpx;
					height: 97rpx;

				}

				&__text {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 25rpx;
					color: #212121;
					line-height: 25rpx;
					margin-top: 23rpx;
				}
			}
		}

		&__box {
			padding-left: 32rpx;
			margin-bottom: 23rpx;
			background-color: #FFFFFF;
			border-radius: 30rpx;

			&__item {
				display: flex;
				align-items: center;
				height: 110rpx;

				&__center {
					height: 110rpx;
					border-bottom: 1rpx solid #ECECEC;
					flex: 1;
					margin-left: 20rpx;
					margin-right: 23rpx;

					&__text {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 30rpx;
						color: #212121;
						line-height: 30rpx;
					}
				}
			}
		}
	}

	.shbox {
		position: relative;
		width: 286rpx;
		height: 130rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		padding: 0 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #000000;
		line-height: 30rpx;
		margin-bottom: 20rpx;
	}

	.bb0 {
		border-bottom: 0;
	}

	.poppic {
		padding: 50rpx;
		width: 350rpx;
		height: 350rpx;
		background-color: #fff;
		border-radius: 30rpx;
	}
</style>